import { useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { login } from '../api'

function Login({ onLogin }) {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState('')
    const navigate = useNavigate()

    const handleSubmit = async (e) => {
        e.preventDefault()
        setError('')

        try {
            await login(username, password)
            onLogin()
            navigate('/dashboard')
        } catch (err) {
            setError(err.response?.data?.error || '登录失败')
        }
    }

    return (
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-dark-900 via-dark-800 to-dark-900 px-4">
            <div className="w-full max-w-md">
                <div className="card backdrop-blur-sm bg-dark-800/80 border-dark-700/50">
                    <div className="text-center mb-8">
                        <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-500 to-blue-700 bg-clip-text text-transparent">
                            🏛️ 记忆宫殿
                        </h1>
                        <p className="text-gray-400">AI 驱动的 3D 模型分享平台</p>
                    </div>

                    <h2 className="text-2xl font-semibold mb-6 text-gray-100">登录</h2>

                    {error && (
                        <div className="mb-4 p-3 bg-red-600/20 border border-red-600/30 rounded-lg text-red-400 text-sm">
                            {error}
                        </div>
                    )}

                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div>
                            <input
                                type="text"
                                placeholder="用户名"
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                className="input-field"
                                required
                            />
                        </div>
                        <div>
                            <input
                                type="password"
                                placeholder="密码"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="input-field"
                                required
                            />
                        </div>
                        <button type="submit" className="btn-primary w-full">
                            登录
                        </button>
                    </form>

                    <p className="mt-6 text-center text-gray-400">
                        还没有账号？
                        <Link to="/register" className="ml-1 text-blue-500 hover:text-blue-400 font-medium transition-colors">
                            立即注册
                        </Link>
                    </p>
                </div>
            </div>
        </div>
    )
}

export default Login
